<div class="page-container" v-cloak>
    <el-card>
        <template #header>
            <div class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>日志配置</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </template>
        <div>
            <div style="margin-bottom: 10px;">
                <el-radio-group @change="getInfo" v-model="log_type">
                    <el-radio-button label="request">操作日志</el-radio-button>
                    <el-radio-button label="error">错误日志</el-radio-button>
                </el-radio-group>
            </div>
            <div v-if="log_type==='request'" style="margin-bottom: 10px;">
                <el-alert
                        :closable="false"
                        title="记录后台操作日志"
                        description="只记录post请求的数据，内容包含请求数、结果数据。"
                        type="success">
                </el-alert>
            </div>
            <el-form v-if="log_type==='request'" label-width="80px">
                <el-form-item label="日志记录">
                    <el-switch
                            @change="submitEvent"
                            v-model="setting.log_is_open"
                            :active-value="1"
                            :inactive-value="0"
                            inactive-color="#C0CCDA"
                            active-text="开启"
                            inactive-text="关闭">
                    </el-switch>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table

                    :data="file_list"
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="file_name"
                        label="文件名称"
                        min-width="180">
                </el-table-column>
                <el-table-column
                        prop="file_size"
                        label="大小"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="file_path"
                        min-width="380"
                        label="文件路径">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        align="center"
                        min-width="180"
                        label="操作">
                    <template #default="{row}">
                        <el-button @click="detailEvent(row)" type="primary">详情</el-button>
                        <el-button @click="deleteEvent(row)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</div>

<script>
    const App = {
        data() {
            return {
                log_type: 'request',
                file_list: [],
                setting: {
                    log_is_open: 1,
                    is_open: 1,
                }
            }
        },
        mounted() {
            this.getInfo()
        },
        methods: {
            detailEvent({file_name}) {
                let url = "{:url('admin/log/detail',['file'=>''])}" + file_name
                this.openNewFrame('日志 ' + file_name, url)
            },
            getInfo() {
                this.httpGet("{:url('admin/log/setting')}", {log_type: this.log_type}).then(res => {
                    if (res.status) {
                        let {setting = {}, file_list = []} = res.data
                        this.file_list = file_list
                        for (let key in setting) {
                            //为了输入框显示，这里将对象转成字符串
                            if (typeof setting[key] == "object") {
                                setting[key] = JSON.stringify(setting[key])
                            }
                        }
                        this.setting = {
                            ...setting
                        }
                    }
                })
            },
            deleteEvent({file_name}) {
                this.$confirm("是否确认删除该记录？", '提示').then(() => {
                    this.httpDelete("{:url('admin/log/delete')}/" + file_name, {}).then(res => {
                        if (res.status) {
                            this.$message.success(res.msg)
                            this.getInfo()
                        }
                    })
                }).catch(err => {
                })
            },
            submitEvent() {
                this.httpPut("{:url('admin/log/setting')}", {setting: this.setting}).then(res => {
                    if (res.status) {
                        this.$message.success(res.msg)
                    }
                })
            }
        }
    }
</script>